<template>
  <el-dialog :title="title"
             :visible.sync="dialogData.show"
             center
             @close="$emit('closedialog')">
    <el-form :model="formdata"
             label-position="right"
             label-width="140px"
             :rules="formRules"
             ref="formRefs">
      <el-form-item label="服务名称："
                    prop="name">
        <el-input v-model="formdata.name"
                  maxlength="10"
                  autocomplete="off"
                  placeholder="请输入服务名称"
                  class="w-200"
                  clearable></el-input>
      </el-form-item>

      <el-form-item label="服务图片："
                    prop="imageUrl">
        <el-upload class="avatar-uploader"
                   :action="imageUploadUrl"
                   :show-file-list="false"
                   accept="image/*"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUpload">
          <img v-if="formdata.imageUrl"
               :src="formdata.imageUrl"
               class="avatar">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="服务内容："
                    prop="content">
        <el-input v-model="formdata.content"
                  autocomplete="off"
                  placeholder="请输入服务内容"
                  clearable></el-input>
      </el-form-item>
      <el-form-item label="快检项目：">
        <Select v-model="formdata.deviceIdList"
                filterable
                remote
                clearable
                multiple
                placeholder="请输入快检项目"
                :remote-method="remoteMethod"
                :loading="loading1"
                class="w-200">
          <Option v-for="(option, index) in deviceList"
                  :value="option.id"
                  :key="index">{{option.name}}</Option>
        </Select>
      </el-form-item>
      <el-form-item label="服务价格："
                    prop="price">
        <el-input v-model="formdata.price"
                  autocomplete="off"
                  placeholder="请输入服务价格"
                  clearable
                  onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
                  class="w-200"></el-input>
      </el-form-item>
      <el-form-item label="客户医院："
                    prop="hospitalId">
        <Select v-model="formdata.hospitalId"
                filterable
                remote
                clearable
                placeholder="请选择医院"
                :remote-method="gethospitalList"
                @on-change="onchange"
                class="w-200"
                :loading="loading1">
          <Option v-for="(option, index) in options1"
                  :value="parseInt(option.hospitalId)"
                  :key="index">{{option.name}}</Option>
        </Select>
      </el-form-item>
      <el-form-item label="服务医生："
                    prop="quickConsultationDoctorList">
        <el-select v-model="formdata.quickConsultationDoctorList"
                   multiple
                   placeholder="请选择服务医生"
                   clearable>
          <el-option v-for="item in doctorList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务流程说明："
                    prop="introduce">
        <el-input v-model="formdata.introduce"
                  type="textarea"
                  maxlength="200"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  show-word-limit
                  autocomplete="off"
                  placeholder="请输入服务流程说明"
                  clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="$emit('closedialog')">取 消</el-button>
      <el-button type="success"
                 @click="submitForm">确 认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: ['dialogData'],
    name: 'inspectionDialog', // 快诊管理弹窗
    data () {
      return {
        formdata: {
          name: '',
          imageUrl: null,
          content: '',
          deviceIdList: [], // 快检项目
          price: '',
          hospitalId: '', // 客户医院
          quickConsultationDoctorList: [], // 服务医生
          introduce: '', // 服务流程说明
        },
        imageUploadUrl: this.api.hospitalManager.uploadImg,
        title: '新增快诊',
        loading1: false,
        options1: [],
        doctorList: [],
        deviceList: [],
        formRules: {
          name: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
          imageUrl: [{ required: true, message: '请上传服务图片', trigger: 'blur' }],
          content: [{ required: true, message: '请输入服务内容', trigger: 'blur' }],
          price: [{ required: true, message: '请输入服务价格', trigger: 'blur' }],
          hospitalId: [{ required: true, message: '请选择医院', trigger: 'change' }],
          quickConsultationDoctorList: [{ required: true, message: '请选择服务医生', trigger: 'change' }],
          introduce: [{ required: true, message: '请输入服务流程说明', trigger: 'blur' }],
        }
      }
    },
    methods: {
      // 根据医院查询服务医生
      onchange (val) {
        if (val) {
          this.post(this.api.cooperationHospital.getQuickConsultationDoctorList, { hospitalId: val }).then(res => {
            if (res.data.code === '200') {
              this.doctorList = res.data.object;
            }
          })
        } else {
          this.formdata.quickConsultationDoctorList = [];
          this.$message.error('请选择医院!');
        }
      },
      submitForm () {
        this.$refs.formRefs.validate((valid) => {
          if (valid) {
            this.post(this.api.cooperationHospital.quickConsultationuploadInfo, this.formdata).then(res => {
              if (res.data.code === '200') {
                this.$message.success('保存成功!');
                this.$emit('closedialog');
              }
            })
          }
        })
      },
      handleAvatarSuccess (res) {
        this.formdata.imageUrl = res.data;
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      gethospitalList (query) {
        if (query !== '') {
          this.loading1 = true;
          this.post(this.api.cooperationHospital.getHospitalList, { "pageSize": 100, "pageStart": 0, "searchCondition": query }).then((res) => {
            if (res.data.code === '200') {
              this.options1 = res.data.object;
            }
          });
        } else {
          this.options1 = [];
        }
        this.loading1 = false;
      },
      remoteMethod (query) {
        // if (query !== '') {
        this.post(this.api.cooperationHospital.deviceList, { pageSize: 200, "pageStart": 0, "name": query }).then(res => {
          if (res.data.code === '200') {
            this.deviceList = res.data.object;
          }
        })
        // } else {
        //   this.deviceList = [];
        // }
      },
    },
    created () {
      if (this.dialogData.info) {
        this.title = '编辑快诊';
        this.formdata = this.dialogData.info;
        this.remoteMethod('');
        // 回显客户医院
        this.options1 = [{
          hospitalId: this.dialogData.info.hospitalId,
          name: this.dialogData.row.hospitalName
        }];
        if (this.formdata.hospitalId) {
          this.onchange(this.formdata.hospitalId);
        }
      } else {
        this.title = '新增快诊';
      }
    },
  };
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px !important;
    height: 98px !important;
    line-height: 98px !important;
    text-align: center;
  }
  .avatar {
    width: 98px !important;
    height: 98px !important;
    display: block;
  }
</style>
